<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>富文本编辑器</title>
    <link rel="stylesheet" href="../plugins/layui/src/css/layui.css">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app1" style="height: auto;">

    <!--公钥-->
    <div id="sample1" style="width: 400px;display: inline-block;">
        <span style="font-size: 30px">公钥</span>
        <el-input
                type="textarea"
                style="width: 400px; height: 200px;font-size: 20px"
                :autosize="{ minRows: 8, maxRows: 40}"
                placeholder="公钥"
                v-model="sm2.encrypt">
        </el-input>
    </div>

    <div style="display: inline-block;margin-bottom: 800px;">
        <img style="margin-bottom: 300px;"
             src="https://img.icons8.com/stickers/100/000000/plus-math.png"/>
    </div>

    <!--明文-->
    <div id="sample" style="width: 400px;display: inline-block;">
        <span style="font-size: 30px">明文</span>
        <el-input
                type="textarea"
                style="width: 400px; height: 200px;font-size: 20px"
                :autosize="{ minRows: 8, maxRows: 40}"
                placeholder="明文"
                v-model="sm2.encrypt">
        </el-input>
    </div>

    <div style="display: inline-block;margin-bottom: 400px;">
        <img style="margin-bottom: 300px;"
             src="https://img.icons8.com/color/72/000000/data-in-both-directions.png"/>
    </div>


    <!--加密-->
    <div id="app2" style="width: 400px;display: inline-block">
        <span style="font-size: 30px">加密结果</span>
        <el-input
                type="textarea"
                style="width: 400px; height: 200px;font-size: 20px"
                :autosize="{ minRows: 8, maxRows: 40}"
                placeholder="加密结果"
                v-model="sm2.encryptOrdecrypt">
        </el-input>
    </div>
    <button style="width: 60px;
            height: 200px;
            margin-bottom: 180px;
            margin-left: 10px;
            background-color: red"
            type="submit"
            @click="generateMd5"
            class="layui-btn">加密</button>

    <button style="width: 60px;
            height: 200px;
            margin-bottom: 180px;"
            class="layui-btn">解密</button>
</div>
<script src="../plugins/layui/src/layui.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script>
    var vue = new Vue({
        el: '#app1',
        data: {
            sm2: {
                encrypt: "请输入文本",//编码数据
                encryptOrdecrypt: "请输入文本",//编码或解码结果
            }
        },
        created() {

        },
        methods:{
            generateMd5() {
                axios.post("/utils/sm2/generate", this.sm2.encrypt,{
                    headers: {
                        'Content-Type':'application/json'
                    }}).then((response) => {
                    if (response.data.flag) {
                        this.sm2.encryptOrdecrypt = response.data.data;
                    }
                });
            }
        }
    })
</script>
</body>
</html>